<template>
  <el-dialog title="委外订单新增" :close-on-click-modal="false" :visible.sync="visible" center fullscreen>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" inline :rules="dataRule" ref="dataForm">

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="制造商" >
            <el-input v-model="dataForm.supplyName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单类型" >
            {{getSaleType(dataForm.saleType)}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制单人" >
            <el-input v-model="this.userInfo.realName" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货联系人" >
            <el-input v-model="dataForm.takeContactName" placeholder="请填写"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货联系电话" >
            <el-input v-model="dataForm.takePhone" placeholder="请填写"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货联系传真">
            <el-input v-model="dataForm.takeFax" placeholder="请填写"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收货地址" class="miui-textarea" style="width: 100%;">
            <el-input  v-model="dataForm.takeAddress" type="textarea" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" class="miui-textarea" style="width: 100%;">
            <el-input v-model="dataForm.consignMemo" type="textarea" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="billId" label="配镜单号" width="150"></el-table-column>
      <el-table-column prop="goodsDisplayName" label="商品名称"></el-table-column>
      <el-table-column prop="goodsQuantity" label="商品数量" width="80"></el-table-column>
      <el-table-column prop="glassFlag" label="镜片类型" width="80"></el-table-column>
      <el-table-column prop="ballGlass" label="球镜" width="80"></el-table-column>
      <el-table-column prop="postGlass" label="柱镜" width="80"></el-table-column>
      <el-table-column prop="axes" label="轴向" width="80"></el-table-column>
      <el-table-column prop="basis" label="基底" width="80">
        <template slot-scope="scope">
          {{getBasalTypeData(scope.row.basis)}}

        </template>
      </el-table-column>
      <el-table-column prop="curvature" label="曲率" width="80"></el-table-column>
      <el-table-column prop="diameter" label="直径" width="80"></el-table-column>
      <el-table-column prop="consignMethod" label="委外方式" width="120">
        <template slot-scope="scope">
          <el-select v-model="scope.row.consignMethod" size="mini" @change="consignMethodChange">
            <el-option value="1" label="委外订单"></el-option>
            <el-option value="2" label="委外加工"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-form :model="dataForm" inline ref="dataForm" label-width="120px" style="margin-top: 15px;">
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售备注" >
            <el-input v-model="dataForm.memo" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加工要求" >
            <el-input v-model="dataForm.workRequest" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" style="margin-right: 15px;" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
      <el-switch
        v-model="dataForm.auditStatus"
        active-text="保存并审核"
        active-value="1"
        inactive-value="0">
      </el-switch>
    </span>
  </el-dialog>
</template>

<script>
  import { remote } from '@/api/admin/dict'
    import { getUnConsignSaleById,addConsignObj,getConsignSaleById } from '@/api/eims/consign/consignOrder'
    import {fetchTree} from '@/api/admin/dept.js'
    import { mapGetters } from 'vuex'

    export default {
    data () {
      return {
        visible: false,
        ischeck: false,
        dataForm: {
          id: 0,
          memo: '',
					auditStatus: '',
          detailList: []
        },
        deptOptions: [],
        saleTypeData: [],
        dataList: [],
        optometry: {},
        dataListLoading: false,
        dataRule: {

        },
        selectionList: [],
        receiveListVisible: false
      }
    },
    computed: {
        ...mapGetters(['permissions','bizData','userInfo'])
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        remote('sale_type').then(result => {
          this.saleTypeData = result.data.data
        })
        this.visible = true
        this.dataList = []
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getUnConsignSaleById(this.dataForm.id).then(response =>{
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.$set(this.dataForm,'auditStatus','0')
                this.optometry = response.data.data.optometry
                let goodsData = response.data.data.detailList
                goodsData.forEach(item => {
                    item.consignMethod = "1"
                })
                this.dataList = goodsData
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
        consignMethodChange(val){
          this.dataList = [...this.dataList]
        },
      //获取配镜类型枚举
      getSaleType(value) {
          let obj = {};
          obj = this.saleTypeData.find((item)=>{
              return item.value == value;
          });
          if(obj && obj.label){
              return obj.label;
          }
      },
      //获取基底类型枚举
        getBasalTypeData(value) {
          let obj = {};
          obj = this.bizData.basalTypeData.find((item)=>{
              return item.value === value;
          });
          if(obj && obj.label){
              return obj.label;
          }
      },
      // 打开商品列表弹窗
      openReceiveListDialog() {
        this.receiveListVisible = true
        this.$nextTick(() => {  this.$refs.receiveList.init() })
      },
      handleSelectionChange(val) {
        this.selectionList = val
      },
      // 删除选中的商品
      delTableData() {
        this.selectionList.forEach((item,index) => {
          for(let i = 0; i < this.dataList.length; i++){
            if(this.dataList[i] == item){
              this.dataList.splice(i,1)
            }
          }
          this.selectionList = []
        })
      },
      //更新表单数据
      updateFormData(obj) {
        let _this = this
        this.dataList = obj
        obj.forEach(item => { this.dataForm.detailList.push({goodsId: item.goodsId}) })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          this.ischeck = true
          if (valid) {
            this.dataForm.detailList.forEach((item,index) => { item.consignMethod = this.dataList[index].consignMethod })
              addConsignObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('生成订单成功')
                  this.$emit('refreshDataList')
                  this.visible = false
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
            }).catch(() => {
              this.ischeck = false
            })
          }else{
            this.ischeck = false
          }
        })
      },
      /*
      * *  获取所需数据字典
      */
     getDeptList(){
       fetchTree().then(result => {
         let dataList = result.data.data
         let options = []
         dataList.forEach(item => {
           options.push({value:item.id,name:item.name})
         })
         this.deptOptions = options
       })
     }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .miui-table {
    width: 100%;
    margin: 10px 0;
    tr th {
      background-color: #f4f5f7;
    }
    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
  }
</style>
